<template>
  <verify :show="isShow" @success="onSuccess" @fail="onFail" @close="onClose" type="modal"/>
  <el-button @click="onShow" w-300px :type="btnType" :disabled="btnType === 'success'">
    {{ statusText }}
  </el-button>
</template>

<script setup>
import {ref} from "vue";
import verify from "vue3-puzzle-vcode";

const statusText = ref('人机验证')
const btnType = ref("default")

const isShow = ref(false);

const onShow = () => {
  isShow.value = true;
};

const onClose = () => {
  isShow.value = false;
};

const emits = defineEmits(['success'])

const onSuccess = () => {
  onClose(); // 验证成功，手动关闭模态框
  statusText.value = '验证通过'
  btnType.value = statusText.value === '验证通过' ? 'success' : statusText.value
  // 验证成功，将标识传给父组件
  emits('success', btnType.value)
};

const onFail = () => {
  onClose() // 验证成功，手动关闭模态框
  // 验证失败，同样将标识传给父组件
  emits('success', btnType.value)
}

</script>
